<template>
  <mu-container v-loading="loading" class="question-list">
    <h2>我出的题</h2>
    <p class="question-list-position">您现在在第 {{ pagination.current_page }} 页</p>
    <question-list-query-builder v-model="query"></question-list-query-builder>
    <div>
      <mu-button color="primary" style="margin:10px" @click="fetch()">刷新列表</mu-button>
    </div>
    <mu-data-table
      :columns="columns"
      :data="list"
      :sort.sync="sort"
      stripe
      border
      @sort-change="handleSortChange">
      <template slot-scope="scope">
        <!-- <td>{{ scope.row.id }}</td> -->
        <td>{{ scope.row.question_form_readable }}</td>
        <td>{{ scope.row.question_type_readable }}</td>
        <td>{{ scope.row.ask }}</td>
        <td>
          <div v-if="scope.row.graph !== null">
            <a href="javascript:;" @click="showGraph(scope.row)">查看图片</a>
          </div>
        </td>
        <td class="is-right">
          <options-shower
            v-if="scope.row.question_form == 1"
            :options="scope.row.options"></options-shower>
          <p v-else>（无选项）</p>
        </td>
        <td>{{ scope.row.answer }}</td>
        <td>
          <mu-button
            v-loading="scope.row.is_deleting"
            color="error"
            @click="handleRemove(scope.row)">删除</mu-button>
        </td>
      </template>
    </mu-data-table>
    <mu-pagination
      :total="pagination.total"
      :page-size="pagination.per_page"
      :current.sync="pagination.current_page"
      class="question-list-pagination"
      raised
      @change="fetch()"></mu-pagination>
    <mu-dialog
      :esc-press-close="false"
      :overlay-close="false"
      :open.sync="remove.dialog"
      title="警告"
      width="600"
      max-width="80%">
      <p>删除不可恢复，确定删除？</p>
      <mu-button slot="actions" flat color="primary" @click="remove.dialog = false">取消</mu-button>
      <mu-button slot="actions" flat color="primary" @click="confirmRemove()">确定</mu-button>
    </mu-dialog>
    <div v-if="graph.show" class="question-list-show-image" @click="graph.show = false">
      <img :src="graph.src" :alt="name">
    </div>
  </mu-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { minus } from '@/util'
import { fetchQuestions, removeQuestion } from '@/api/questions'
import OptionsShower from './OptionsShower'
import QuestionListQueryBuilder from '@/components/QuestionListQueryBuilder'
import { process } from '@/util/questions'

export default {
  name: 'QuestionList',
  components: {
    OptionsShower,
    QuestionListQueryBuilder
  },
  data() {
    return {
      columns: [
        // { title: 'ID', width: 80, name: 'id', sortable: true },
        { title: '题目形式', name: 'question_form', width: 120, align: 'center', sortable: true },
        { title: '题目分类', name: 'question_type', align: 'center', sortable: true },
        { title: '题面', name: 'ask', align: 'center', sortable: true },
        { title: '图片', name: 'graph', align: 'center', sortable: true },
        { title: '选项', name: 'options', align: 'center', sortable: true },
        { title: '答案', name: 'answer', align: 'center', sortable: true },
        { title: '删除', align: 'center', sortable: false }
      ],
      list: [],
      pagination: {
        current_page: 1,
        per_page: 20,
        total: 0
      },
      sort: {
        name: '',
        order: 'asc'
      },
      loading: false,
      remove: {
        row: null,
        dialog: false
      },
      graph: {
        show: false,
        src: ''
      },
      query: {}
    }
  },
  computed: {
    ...mapGetters({
      options: 'types/options'
    })
  },
  mounted() {
    this.fetch()
  },
  methods: {
    async fetch(page = this.pagination.current_page) {
      this.loading = true
      try {
        const data = await fetchQuestions(page, this.query)
        this.list = data.data.map(this.process)
        for (const key in this.pagination) {
          this.pagination[key] = data[key]
        }
      } catch (err) {
        this.$report(err)
      }
      this.loading = false
    },
    handleSortChange({ name, order }) {
      this.list = this.list.sort((a, b) => minus(a[name], b[name]) * (order === 'asc' ? 1 : -1))
    },
    process(item) {
      return {
        ...process(item, this.options),
        is_deleting: false
      }
    },
    handleRemove(row) {
      this.remove.row = row
      this.remove.dialog = true
    },
    async confirmRemove() {
      this.remove.row.is_deleting = true
      try {
        await removeQuestion(this.remove.row.id)
        this.$toast.success('删除成功')
        await this.fetch()
      } catch (err) {
        this.$report(err)
      }
      this.remove.dialog = false
      this.remove.row.is_deleting = false
    },
    showGraph(row) {
      this.graph.src = `/api/questions/${row.id}/graph`
      this.graph.show = true
    }
  }
}
</script>

<style>
.question-list-position,
.question-list-pagination {
  margin: 20px 0;
}
.question-list-show-image {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.4);
}
.question-list-show-image img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 90%;
  height: 90%;
  object-fit: contain;
}
</style>
